/*
 * @Author: xiaosihan 
 * @Date: 2023-03-28 19:09:16 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-03-28 19:28:46
 */
// PC页面模板组件 - 严格遵循此模板的导入顺序和格式
import React, { useEffect, useRef, useState } from "react";

// 页面样式必须要使用module.less后缀的文件
import clsx from 'clsx';
import styles from "./cannonDemo.module.less";

// PC端使用observer来包裹组件，使mobx可以监听状态变化
import { observer } from 'mobx-react-lite';

// 其他导入
import cannonRenderer from "./cannonRenderer";

// 组件props接口定义
interface Iprops {
    children?: React.ReactNode;
}

/**
 * CannonDemo页面组件
 * 遵循项目统一的开发规范
 */
// 重要：组件函数不要使用React.FC类型注解
const CannonDemo = observer((props: Iprops) => {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});

    useEffect(() => {

    }, []);

    return (
        <div ref={dom => cannonRenderer.setContainer(dom)} className={styles.container}></div>
    );
});

export default CannonDemo;